fix(tags): ensure consistent vertical spacing across mobile view (#276)#284
Open
Preetiaarya wants to merge 63 commits intotattle-made:masterfrom
Open
fix(tags): ensure consistent vertical spacing across mobile view (#276)#284Preetiaarya wants to merge 63 commits intotattle-made:masterfrom
Preetiaarya wants to merge 63 commits intotattle-made:masterfrom
Conversation
✅ Deploy Preview for tattle-website-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Author
|
Hello @maanasb01 Sir, Could you please review the changes I made to fix the tag spacing issue on the Blog page? I added vertical padding and bottom margin to each tag container to ensure consistent spacing, especially on mobile view. |
Collaborator
|
Hey @Preetiaarya, the issue also mentions fixing the updates' tags as well. Can you fix them as well? The project tags for the updates page are already fixed with the changes that you made, but each update also has tags listed within it. In mobile view, these tags are vertically aligned instead of covering the horizontal space. We need to wrap these tags (we can try flex-wrap or whatever else you want to try is also fine), so that they utilize the horizontal space properly.
|
Collaborator
|
Hey @Preetiaarya, any update on this? |
Contributor
Author
|
Hello @maanasb01, I’ve pushed the blog tags padding and font size changes to fix/blog-tags-gap. |
Contributor
I feel like the text size has become very small now @Preetiaarya @maanasb01 what do you think? possible to not reduce the text size of the tags? |
Collaborator
|
Hey @Preetiaarya, can you please take this up? |
* Fix image overflow in MDX and enhance level-2 headings with Tailwind styling for spacing and readability * Add responsive styling to MDX images for better visibility * Update img width on 2019 report page * fixes tattle-made#273: [Change heading level for Contributors section in mdx file] * Wrapped section in w-full div as suggested * Update heading level * revert box padding to small
* Adjust Box padding and Heading margin for better layout spacing * fixes tattle-made#272: [Add overflow hidden to iframe container to prevent overlap on small screens.] * fixes tattle-made#272: [Fix iframe overflow on small screens in ogbv.jsx] * Added overflow: hidden to fix layout shift in ogbv.jsx
tattle-made#281) * Fixes tattle-made#274: [Added horizontal padding to header for better mobile layout] * fixes tattle-made#281: [Apply horizontal padding only on small screens in conditional Box rendering.] fix: change the header padding to medium in mobile view
…ile view) (tattle-made#283) * fixes tattle-made#275: [Updated some Heading levels, heading line-height, links overflow, img overflow of blog mdx file] * fixes tattle-made#275: [added spacing above image, handled overflow for image, links, tables, and iframes, and corrected Heading syntax] * fix tattle-made#275: fix overflowing link in 2023-12-17-sprint-dmm.mdx causing layout shift on mobile * fix tattle-made#275: prevent text and link overflow on small screens in topic modelling post by using word-break * refactor: move Grommet Heading import to top in similar videos blog * refactor: move Heading import to top in blog files * fix: update blog date to 16 and apply link wrapping to prevent mobile layout shift * shift 'Heading' import below frontmatter to follow MDX syntax rules * shift 'Heading' import below frontmatter to follow MDX syntax rules * correct blog post date to 2024-03-13 as per original publish schedule
* fixes tattle-made#286: [show 'Other Projects' in mobile nav by mapping index 4 and updating description ] * revert: remove description for "Other Projects" in dropDownOptionsTools to maintain original content
* fix tattle-made#285: add bottom margin to TagBubble to ensure spacing on wrap * fix tattle-made#285: add spacing and prevent tag overlap in FeaturedListItem and AllListItem for all screen sizes * refactor: remove margin-bottom from TagBubble to shift spacing control to parent * fix: add vertical spacing between wrapped tag rows using Tailwind's gap-y-2
…e-made#300) * docs: add JSDoc comments to BlogSidebar and RelatedPostItem * docs(Calendar): add JSDoc for Calendar component with prop types and behavior description * docs: add JSDoc to BlogDashboard component * docs: add JSDoc to BlogIndex component with tag and blog layout info * docs: add JSDoc to blog layout component * docs: add JSDoc for DefaultLayoutNarrow layout component * docs: add JSDoc for DefaultLayout component * docs: add JSDoc to people layout component * docs: Add JSDoc for TagTemplate layout and byline helper * docs: add JSDoc to TagProjectPage component * docs: add JSDoc for UpdatesTagProjectPage component * docs: add JSDoc for UpdatesTagProjectPage component * docs: add JSDoc for SitemapLayout component * docs: add JSDoc for DropDownMenu component * docs: add JSDoc for LatestBlogsUpdates component * docs: add JSDoc for LatestProductBlogsUpdates component * docs: add JSDoc for LatestEntries component and helper functions * docs: add JSDoc for CovidWhatsappTSNEMap component * docs: add JSDoc for VaccineHesitancyClusterVisualization component * docs: add JSDoc for AllBlogindexLayout component * docs: add JSDoc for NarrowContentWrapper component * docs: add JSDoc for NarrowSection component * docs: add JSDoc for ContentpageLayout component * docs: add JSDoc for BlogHeadercard component * docs: add module-level JSDoc for corestyle component * docs: add JSDoc for CustomCodeBlock component * docs: add JSDoc for IconFeed SVG component * docs: add JSDoc for InlineCodeBlock component * docs: add JSDoc for MailchimpSubscribeForm component * docs: add JSDoc for MasonryLayout component * docs: add JSDoc for MasonryLayoutResponsive * docs: add jSDoc for peopleCard component * docs: add jSDoc for ResponsiveContributorGrid component * docs: add JSDoc for ResponsiveImage component * docs: add JSDoc for SEO component * docs: add jSDoc for simpleheader component * docs: add JSDoc for SmallFooter component * docs: add JSDoc for Spinner component * docs: add JSDoc for TagBubble component * docs: add JSDoc for tagBubbleBlog component * docs: add JSDoc for TattleLinks component * docs: add JSDoc for TattleLogo component * docs: add JSDoc for textstyle exports * docs: add JSDoc for TattleTheme object
* Add new blog post: Denormalising Slurs and Building Resilience to Online Workshops * Add 'What is AI Safety?' blog post
* Add new update files to updates page * fix typo * Sort update files name and remove launch tags * chore: add missing titles, fix dates, etc --------- Co-authored-by: Denny George <denny@tattle.co.in> Co-authored-by: maanasb01 <maanasb01@gmail.com>
✅ Deploy Preview for tattle-website-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR fixes issue #276 by applying consistent vertical spacing between tags on mobile view.
Changes Made:
pad={{ vertical: "xsmall" }}round="xsmall"margin={{ bottom: "xxsmall" }}margin={{ bottom: "small" }}to the container above the tags to maintain spacing in the layout.This ensures the tag layout looks consistent and avoids layout shift on small screens.
Screeenshort
